<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>181-蒙版效果.html</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		body{
			height: 3000px;
		}
		#login-box{
			position: fixed;
			left: 50%;
			top: 50%;
			width: 300px;
			height: 400px;
			margin-left: -150px;
			margin-top: -200px;
			background-color: #ccc;
			border: 1px solid #000;
			display: none;
		}
		#mask{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0,0,0,0.5);
			display: none;
	</style>
</head>
<body>
	<button id="btn">登录</button>
	<div id="mask"></div>
	<div id="login-box">
		<input type="text">
		<button id="login">注册</button>
	</div>
</body>
<script>
	var oBtn = document.getElementById('btn');
	var oMask = document.getElementById('mask');
	var oLogin = document.getElementById('login');
	var oLoginBox = document.getElementById('login-box');

	oBtn.onclick = function(ev){
		oMask.style.display = "block";
		oLoginBox.style.display = "block";
		ev.stopPropagation();
	}
	oLoginBox.onclick = function(ev){
		ev.stopPropagation();
	}
	document.onclick = function(){
		oMask.style.display = "none";
		oLoginBox.style.display = "none";
	}
	oLogin.onclick = function(){
		window.location = 'https://www.baidu.com'
	}
</script>
</html>